<template>
	<view class="container">
		<view style="text-align: center;">
			<image style="width: 120upx;height: 120upx;margin-top: 140upx;border-radius:20upx" src="../../../static/img/waterlogin.jpeg"></image>
			<view style="font-size: 28upx;margin-top: 32upx">来一桶购水平台</view>
			<button v-if="!taobao && weixinLogin" class="confirm-btn" @click="weixinLo">微信登录</button>
			<button v-if="weixinLogin&&taobao" class="confirm-btn-weixin" @click="weixinLo">微信登录</button>
			<button v-if="!weixinLogin && !taobao" class="confirm-btn" @click="register">手机号登录</button>
			<view v-if="weixinLogin||taobao" style="margin-top: 32upx;text-align: center"><text style="color: #999999;font-size: 26upx;"
				 @click="register()">手机登录 ></text></view>
			<!-- 底部信息 -->
			<view class="footer">
				<text>登录即代表同意</text>
				<!-- 协议地址 -->
				<text style="color: #132da0;font-size: 20upx;" @click="toMimi()">《隐私政策》</text>
				<text>和</text>
				<text style="color: #1e09a1;font-size: 20upx;" @click="toXieyi()">《用户服务协议》</text></view>
		</view>
	</view>
	</view>
</template>

<script>
	var _this;

	import {
		loginH5,
		loginMobile,
		registerVerify,
		register,
		// getCodeApi,
		getUserInfo,
		thirdPartLogin,

	} from "@/api/user";

	import {
		wechatAuthWx,
		wechatAuth
	} from "@/api/public";

	import Cache from '@/utils/cache';

	import {
		WX_AUTH,
		STATE_KEY,
		LOGINTYPE,
		BACK_URL,
		WX_USER_OPENID
	} from '@/config/cache';

	export default {
		data() {
			return {
				//logo图片 base64
				logoImage: '',
				phoneData: '', //用户/电话
				passData: '', //密码
				isRotate: false, //是否加载旋转
				taobao: false,
				weixinLogin: false
			};
		},

		mounted() {
			_this = this;
		},
		destroyed() {
			uni.hideKeyboard();
		},
		onLoad() {
			this.weixinLogin = this.$wechat.isWeixin();
			if (window.location.href.indexOf('?code=') !== -1 || window.location.href.indexOf('&code=') !== -1) {
				let code;
				if (window.location.href.indexOf('?code=') !== -1) {
					code = window.location.href.split('?code=')[1].split('&')[0];
				} else {
					code = window.location.href.split('&code=')[1].split('&')[0];
				}

				let loginType = Cache.get(LOGINTYPE);
				wechatAuth(code, Cache.get("spread"), loginType)
					.then(({
						data
					}) => {
						this.$store.commit("LOGIN", {
							'token': data.token
						});
						const backUrl = this.$Cache.get(BACK_URL) || "/pages/food/water/index";
						this.$Cache.clear(BACK_URL);
						this.$queue.setData('openid', data.user.openId);
						getUserInfo().then(res => {
							this.$store.commit("SETUID", res.data.uid);
							if (backUrl === '/pages/food/water/index' || backUrl === '/pages/order/order' || backUrl ===
								'/pages/user/index') {
								uni.switchTab({
									url: backUrl
								});
							} else {
								uni.switchTab({
									url: '/pages/food/water/index'
								});
							}
						})


					}).catch(data => {
						this.$util.Tips({
							title: data
						});
					});
			}
		},
		methods: {
			navBack() {
				uni.navigateBack();
			},
			register() {
				uni.navigateTo({
					url: '/pages/users/login/loginphone'
				});
			},
			toMimi() {
				uni.navigateTo({
					url: '/pages/public/mimi'
				});

			},

			toXieyi() {
				uni.navigateTo({
					url: '/pages/public/xieyi'
				});
			},
			toLogin() {
				let that = this;
				uni.showLoading({
					title: '正在登录中'
				});
				loginH5({
						account: that.phoneData,
						password: that.passData
					})
					.then(res => {
						that.$store.commit("LOGIN", {
							'token': res.data.token
						});

						const backUrl = that.$Cache.get(BACK_URL) || "/pages/food/water/index";
						that.$Cache.clear(BACK_URL);
						that.$store.commit("SETUID", res.data.user.uid);
						if (backUrl === '/pages/food/water/index' || backUrl === '/pages/order/order' || backUrl ===
							'/pages/user/index') {

							uni.switchTab({
								url: backUrl
							});

						} else {
							uni.switchTab({
								url: '/pages/food/water/index'
							});
						}

					}).catch(data => {
						uni.hideLoading();
						that.$util.Tips({
							title: data
						});
					});
			},
			startLogin() {
				if (this.phoneData.length == 0) {
					this.$queue.showToast('请输入账号');
					return;
				}
				if (this.passData.length < 1) {
					this.$queue.showToast('请输入密码');
					return;
				}
				this.toLogin();



			},


			weixinLo() {
				let that = this;
				window.location.href =
					'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
					that.$queue.getWxAppid() +
					'&redirect_uri=' +
					window.location.href.split('#')[0] +
					'&response_type=code&scope=snsapi_userinfo#wechat_redirect';

			}
		}
	};
</script>

<style lang="scss">
	.footer {
		padding-left: 140upx;
		margin-top: 32upx;
		font-size: 24upx;
		color: #666666;
		text-align: center;
		display: flex;
	}

	page {
		background: #fff;
	}

	.send-msg {
		border-radius: 30px;
		color: black;
		background: white;
		height: 30px;
		font-size: 14px;
		line-height: 30px;
	}

	.container {
		top: 0;
		padding-top: 50px;
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #fff;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 20px;
	}

	.back-btn {
		position: absolute;
		left: 20px;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 20px;
		font-size: 20px;
		color: $font-color-dark;
	}

	.left-top-sign {
		font-size: 80px;
		color: #f8f8f8;
		position: relative;
	}

	.right-top-sign {
		position: absolute;
		top: 40px;
		right: -15px;
		z-index: 95;

		&:before,
		&:after {
			display: block;
			content: '';
			width: 20px;
			height: 40px;
			background: #e10a07;
		}

		&:before {
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}

		&:after {
			position: absolute;
			right: -198px;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
			/* background: pink; */
		}
	}

	.left-bottom-sign {
		position: absolute;
		left: -270px;
		bottom: -320px;
		/*border: 100upx solid #d0d1fd;*/
		border-radius: 50%;
		padding: 90px;
	}

	.welcome {
		position: relative;
		left: 30px;
		top: -55px;
		font-size: 28px;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
	}

	.input-content {
		padding: 0 20px;
	}

	.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30px;
		background: #f8f6fc;
		height: 64px;
		border-radius: 4px;
		margin-bottom: 30px;

		&:last-child {
			margin-bottom: 0;
		}

		.tit {
			height: 30px;
			line-height: 28px;
			font-size: $font-sm + 2upx;
			color: #606266;
		}

		input {
			height: 40px;
			font-size: $font-base + 2upx;
			color: #303133;
			width: 100%;
		}
	}

	.confirm-btn-weixin {
		width: 200px;
		height: 42px;
		line-height: 42px;
		border-radius: 30px;
		margin-top: 40upx;
		background: -moz-linear-gradient(left, #f15b6c, #e10a07 100%);
		background: -webkit-gradient(linear, left top, left right, color-stop(0, #f15b6c), color-stop(100%, #e10a07));
		background: -webkit-linear-gradient(left, #f15b6c 0, #e10a07 100%);
		background: -o-linear-gradient(left, #f15b6c 0, #e10a07 100%);
		background: -ms-linear-gradient(left, #f15b6c 0, #e10a07 100%);
		background: linear-gradient(to left, #f15b6c 0, #e10a07 100%);
		color: #fff;
		font-size: 32upx;

		text-align: center &:after {
			border-radius: 60px;
		}
	}

	.confirm-btn {
		width: 200px;
		height: 42px;
		line-height: 42px;
		border-radius: 30px;
		margin-top: 300upx;
		text-align: center;
		background: -moz-linear-gradient(left, #f15b6c, #e10a07 100%);
		background: -webkit-gradient(linear, left top, left right, color-stop(0, #f15b6c), color-stop(100%, #e10a07));
		background: -webkit-linear-gradient(left, #f15b6c 0, #e10a07 100%);
		background: -o-linear-gradient(left, #f15b6c 0, #e10a07 100%);
		background: -ms-linear-gradient(left, #f15b6c 0, #e10a07 100%);
		background: linear-gradient(to left, #f15b6c 0, #e10a07 100%);
		color: #fff;
		font-size: 32upx;
		margin-left: auto;
		margin-right: auto;
		padding-left: 14px;
		padding-right: 14px;

		&:after {
			border-radius: 60px;
		}
	}

	.confirm-btn1 {
		width: 300px;
		height: 42px;
		line-height: 42px;
		border-radius: 30px;
		margin-top: 40px;
		background: whitesmoke;
		color: grey;
		font-size: 32upx;

		&:after {
			border-radius: 60px;
		}
	}

	.forget-section {
		font-size: $font-sm + 2upx;
		color: #4399fc;
		text-align: center;
		margin-top: 40px;
	}

	.register-section {
		left: 0;
		margin-top: 30px;
		bottom: 30px;
		width: 100%;
		font-size: $font-sm + 2upx;
		color: #606266;
		text-align: center;

		text {
			color: #4399fc;
			margin-left: 10px;
		}
	}
</style>
